<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: -24px;">
        <el-tab-pane v-for="(item,index) in dicts" :key="index" :label="item.label" :name="item.value">
          <el-tabs v-model="subactiveName" style="margin-top: -14px;" @tab-click="handleSubClick">
            <el-tab-pane label="一级品类" name="first">
              <div ref="chart" :id="index" style="width: 99%; height: 200px;margin-top: -6px;"></div>
            </el-tab-pane>
            <el-tab-pane label="二级品类[自产苗]" name="second" v-if="parentData!='洋丽人'&&parentData!='何文丽'">
              <div ref="chart1" :id="'div1'+index" style="width: 99%; height: 200px;margin-top: -4px;"></div>
            </el-tab-pane>
            <el-tab-pane label="二级品类[其他]" name="third" v-if="parentData!='洋丽人'&&parentData!='何文丽'">
              <div ref="chart2" :id="'div2'+index" style="width: 99%; height: 200px;margin-top: -4px;"></div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "../../components/kong.vue";
import axios from 'axios';
import * as echarts from 'echarts';
export default {
  components: { vueSeamlessScroll, Kong },
  props: ['parentData'],
  data() {
    return {
      activeName: null,
      subactiveName: 'first',
      list: [],
      dicts: [],
      tab1Color: 'aqua',
      activeColor: 'orange',
      chartIndex: null,
      chart1: null,
      chart2: null,
      chart3: null,
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
    };
  },
  computed: {
    
  },
  created() {
    this.getData();
  },
  watch: {
    parentData(newVal) {
      console.log('年度产品聚焦-子组件的数据已更新:', newVal);
      this.getData();
    },
  },
  mounted() {
    
  },
  
  methods: {
    handleClick(tab, event) {
      this.chartIndex = tab.index;
      this.chart1 = tab.index;
      this.chart2 = "div1"+tab.index;
      this.chart3 = "div2"+tab.index;
      const chart = echarts.init(document.getElementById(this.chart1));
      this.$nextTick(() => {
        chart && chart.resize();
      });
      if(this.parentData!='洋丽人'&&this.parentData!='何文丽'){
        const chart1 = echarts.init(document.getElementById(this.chart2));
        this.$nextTick(() => {
          chart1 && chart1.resize();
        });
        const chart2 = echarts.init(document.getElementById(this.chart3));
        this.$nextTick(() => {
          chart2 && chart2.resize();
        });
      }
      this.getSummary(tab.name,tab.index);
    },
    handleSubClick(tab, event) {
      if(tab.index==0){
        const chart = echarts.init(document.getElementById(this.chart1));
        this.$nextTick(() => {
          chart && chart.resize();
        });
      }else if(tab.index==1){
        const chart1 = echarts.init(document.getElementById(this.chart2));
        this.$nextTick(() => {
          chart1 && chart1.resize();
        });
      }else if(tab.index==2){
        const chart2 = echarts.init(document.getElementById(this.chart3));
        this.$nextTick(() => {
          chart2 && chart2.resize();
        });
      }
    },
    getRandomHexColor() {
      const randomColor = Math.floor(Math.random() * 16777215).toString(16);
      return `#${randomColor.padStart(6, '0')}`;
    },
    getSummary(name,index){
      let url = null;
      if(this.parentData=="云南上云丰花卉有限公司"){
        url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData;
      }else if(this.parentData=="电商"){
        url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&month="+name;
      }else if(this.parentData=="销售部"){
        url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&bigdpt="+name;
      }else{
        url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&month="+name;
      }
      axios.get(url) // 使用 params 参数传递查询参数
      .then(res => {
        if (!this.timer) {
          // console.log("公司目标达成", res);
        }
        if(res.code===200){
          this.list = res.data;
          let labels = [];
          if(res.data.brand.length>0){
            for(let i=0;i<res.data.brand.length;i++){
              labels.push(res.data.brand[i].name);
            }
          }
          let zcmcolors = [];
          let zcmlabels = [];
          if(res.data.zcm.length>0){
            for(let i=0;i<res.data.zcm.length;i++){
              zcmlabels.push(res.data.zcm[i].bigname);
              let color = this.getRandomHexColor();
              zcmcolors.push(color);
            }
          }
          let qtcolors = [];
          let qtlabels = [];
          if(res.data.qt.length>0){
            for(let i=0;i<res.data.qt.length;i++){
              qtlabels.push(res.data.qt[i].bigname);
              let color = this.getRandomHexColor();
              qtcolors.push(color);
            }
          }
          this.chart1 = index;
          this.chart2 = "div1"+index;
          this.chart3 = "div2"+index;
          const chart = echarts.init(document.getElementById(index));
          const option = {
              tooltip: { 
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].data.extraInfo
                }
              },
              legend: { 
                orient: 'vertical',   // 竖排
                right: 0,            // 距右侧 10px（也可写 'right' 贴边）
                bottom: 10,
                data: ['保底目标', '接单达成'],
                textStyle: {
                  color: 'aqua'   // 图例文字颜色
                }
              },
              grid: { left: '3%', right: '10%', bottom: '1%',height: 200, containLabel: true },

              /* 横向：Y 轴类目，X 轴数值 */
              yAxis: { 
                type: 'category', 
                data: labels,
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
              },
              xAxis: { 
                type: 'value',
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
                splitLine: {
                  show: true, // 显示网格线
                  lineStyle: {
                    color: 'aqua', // 设置网格线颜色
                    type: 'solid' // 设置网格线为虚线
                  },
                },
              },

              series: [
                /* 三条不同颜色的条放在同一位置重叠 */
                {
                  name: '保底目标',
                  type: 'bar',
                  stack: 'grpA',        // 不同 stack，防止堆叠
                  barGap: '-100%',      // 🔑 负值 → 完全重叠
                  barWidth: 20,
                  data: res.data.brand.map(item => ({
                    value: item.target,
                    name: item.name,
                    extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.name+"</span>,达成率: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>保底目标: <span style='color:red;font-weight:bold;'>"+item.target+"万元</span>,达成: <span style='color:green;font-weight:bold;'>"+item.finished+"万元</span><br/>销售数量: <span style='color:blue;font-weight:bold;'>"+item.amount+"</span>,成交单数: <span style='color:blue;font-weight:bold;'>"+item.orders+"</span><br />销售占比: <span style='color:blue;font-weight:bold;'>"+item.saleRate+"%</span>"
                  })),
                  itemStyle: { color: 'orange' },
                  label: {
                    show: true,
                    position: 'right',     
                    formatter: '{c}万元',
                    fontSize: 10,
                    fontWeight:'bold',
                    color: 'aqua'
                  }
                },
                {
                  name: '接单达成',
                  type: 'bar',
                  stack: 'grpB',
                  barGap: '-50%',
                  barWidth: 22,
                  data: res.data.brand.map(item => ({
                    value: item.finished,
                    name: item.name
                  })),
                  itemStyle: { color: 'lightgreen' },
                  label: {
                    show: true,
                    position: 'right',     
                    formatter: '{c}万元',
                    fontSize: 10,
                    fontWeight:'bold',
                    color: 'aqua'
                  }
                },
              ]
            };
          chart.setOption(option);

          if(this.parentData!='洋丽人'&&this.parentData!='何文丽'){

            // 自产苗
            const chart1 = echarts.init(document.getElementById("div1"+index));
            const option1 = {
              tooltip: { 
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].data.extraInfo
                }
              },
              grid: { left: '3%', right: '10%', bottom: '1%',height: 200,containLabel: true },

              /* 横向：Y 轴类目，X 轴数值 */
              yAxis: { 
                type: 'category', 
                data: zcmlabels,
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
              },
              xAxis: { 
                type: 'value',
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
                splitLine: {
                  show: true, // 显示网格线
                  lineStyle: {
                    color: 'aqua', // 设置网格线颜色
                    type: 'solid' // 设置网格线为虚线
                  },
                },
              },

              series: [
                /* 三条不同颜色的条放在同一位置重叠 */
                {
                  type: 'bar',
                  barWidth: 20,
                  data: res.data.zcm.map(item => ({
                    value: item.finished,
                    name: item.name,
                    extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.bigname+"</span><br/>占比: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>本二级品类成交金额: <span style='color:red;font-weight:bold;'>"+item.finished+"万元</span><br/>一级品类成交金额: <span style='color:green;font-weight:bold;'>"+item.target+"万元</span>"
                  })),
                  itemStyle: {
                    color: function(params) {
                      // 颜色数组
                      const colorList = zcmcolors;
                      // 根据数据索引返回对应颜色
                      return colorList[params.dataIndex % colorList.length];
                    }
                  },
                  label: {
                    show: true,
                    position: 'right',     
                    formatter: '{c}万元',
                    fontSize: 10,
                    fontWeight:'bold',
                    color: 'aqua'
                  }
                }
              ]
            };
            chart1.setOption(option1);
            // 其他
            const chart2 = echarts.init(document.getElementById("div2"+index));
            const option2 = {
              tooltip: { 
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].data.extraInfo
                }
              },
              grid: { left: '3%', right: '10%', bottom: '1%',height: 200,containLabel: true },

              /* 横向：Y 轴类目，X 轴数值 */
              yAxis: { 
                type: 'category', 
                data: qtlabels,
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
              },
              xAxis: { 
                type: 'value',
                axisLabel: {
                  textStyle: {
                    color: 'aqua', // 设置 X 轴标签字体颜色为红色
                    fontSize: 12,    // 设置 X 轴标签字体大小
                  }
                },
                splitLine: {
                  show: true, // 显示网格线
                  lineStyle: {
                    color: 'aqua', // 设置网格线颜色
                    type: 'solid' // 设置网格线为虚线
                  },
                },
              },

              series: [
                /* 三条不同颜色的条放在同一位置重叠 */
                {
                  type: 'bar',
                  barWidth: 20,
                  data: res.data.qt.map(item => ({
                    value: item.finished,
                    name: item.name,
                    extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.bigname+"</span><br/>占比: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>本二级品类成交金额: <span style='color:red;font-weight:bold;'>"+item.finished+"万元</span><br/>一级品类成交金额: <span style='color:green;font-weight:bold;'>"+item.target+"万元</span>"
                  })),
                  itemStyle: {
                    color: function(params) {
                      // 颜色数组
                      const colorList = qtcolors;
                      // 根据数据索引返回对应颜色
                      return colorList[params.dataIndex % colorList.length];
                    }
                  },
                  label: {
                    show: true,
                    position: 'right',     
                    formatter: '{c}万元',
                    fontSize: 10,
                    fontWeight:'bold',
                    color: 'aqua'
                  }
                }
              ]
            };
            chart2.setOption(option2);
          }
          this.switper()
        }else{
          this.pageflag = false;
          this.$Message.warning(res.msg);
        }
      });
    },
    getData() {
      console.log("--------年度产品聚焦------->",this.parentData)
      axios.get('http://'+this.hostIP+':9500/api/bigscreen/getMonthDicts?area='+this.parentData) 
      .then(res1 => {
        if (!this.timer) {
          // console.log("公司目标达成", res);
        }
        if(res1.code===200){
          this.dicts = res1.data;
          this.activeName = res1.data[0].value;
          let url = null;
          if(this.parentData=="云南上云丰花卉有限公司"){
            url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData;
          }else if(this.parentData=="电商"){
            url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&month="+res1.data[0].value;
          }else if(this.parentData=="销售部"){
            url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&bigdpt="+res1.data[0].value;
          }else{
            url = 'http://'+this.hostIP+':9500/api/bigscreen/getProductSummary?area='+this.parentData+"&month="+res1.data[0].value;
          }
          axios.get(url) // 使用 params 参数传递查询参数
          .then(res => {
            if (!this.timer) {
              // console.log("公司目标达成", res);
            }
            if(res.code===200){
              this.list = res.data;
              let labels = [];
              if(res.data.brand.length>0){
                for(let i=0;i<res.data.brand.length;i++){
                  labels.push(res.data.brand[i].name);
                }
              }
              let zcmcolors = [];
              let zcmlabels = [];
              if(res.data.zcm.length>0){
                for(let i=0;i<res.data.zcm.length;i++){
                  zcmlabels.push(res.data.zcm[i].bigname);
                  let color = this.getRandomHexColor();
                  zcmcolors.push(color);
                }
              }
              let qtcolors = [];
              let qtlabels = [];
              if(res.data.qt.length>0){
                for(let i=0;i<res.data.qt.length;i++){
                  qtlabels.push(res.data.qt[i].bigname);
                  let color = this.getRandomHexColor();
                  qtcolors.push(color);
                }
              }
              const chart = echarts.init(document.getElementById("0"));
              const option = {
                tooltip: { 
                  trigger: 'axis',
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: { 
                  orient: 'vertical',   // 竖排
                  right: 0,            // 距右侧 10px（也可写 'right' 贴边）
                  bottom: 10,
                  data: ['保底目标', '接单达成'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: { left: '3%', right: '10%', bottom: '1%',height: 200, containLabel: true },

                /* 横向：Y 轴类目，X 轴数值 */
                yAxis: { 
                  type: 'category', 
                  data: labels,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                xAxis: { 
                  type: 'value',
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },

                series: [
                  /* 三条不同颜色的条放在同一位置重叠 */
                  {
                    name: '保底目标',
                    type: 'bar',
                    stack: 'grpA',        // 不同 stack，防止堆叠
                    barGap: '-100%',      // 🔑 负值 → 完全重叠
                    barWidth: 20,
                    data: res.data.brand.map(item => ({
                      value: item.target,
                      name: item.name,
                      extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.name+"</span>,达成率: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>保底目标: <span style='color:red;font-weight:bold;'>"+item.target+"万元</span>,达成: <span style='color:green;font-weight:bold;'>"+item.finished+"万元</span><br/>销售数量: <span style='color:blue;font-weight:bold;'>"+item.amount+"</span>,成交单数: <span style='color:blue;font-weight:bold;'>"+item.orders+"</span><br />销售占比: <span style='color:blue;font-weight:bold;'>"+item.saleRate+"%</span>"
                    })),
                    itemStyle: { color: 'orange' },
                    label: {
                      show: true,
                      position: 'right',     
                      formatter: '{c}万元',
                      fontSize: 10,
                      fontWeight:'bold',
                      color: 'aqua'
                    }
                  },
                  {
                    name: '接单达成',
                    type: 'bar',
                    stack: 'grpB',
                    barGap: '-50%',
                    barWidth: 22,
                    data: res.data.brand.map(item => ({
                      value: item.finished,
                      name: item.name
                    })),
                    itemStyle: { color: 'lightgreen' },
                    label: {
                      show: true,
                      position: 'right',     
                      formatter: '{c}万元',
                      fontSize: 10,
                      fontWeight:'bold',
                      color: 'aqua'
                    }
                  },
                ]
              };
              chart.setOption(option);

              // 自产苗
              const chart1 = echarts.init(document.getElementById("div10"));
              const option1 = {
                tooltip: { 
                  trigger: 'axis',
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                grid: { left: '3%', right: '10%', bottom: '1%',height: 200,containLabel: true },

                /* 横向：Y 轴类目，X 轴数值 */
                yAxis: { 
                  type: 'category', 
                  data: zcmlabels,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                xAxis: { 
                  type: 'value',
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },

                series: [
                  /* 三条不同颜色的条放在同一位置重叠 */
                  {
                    type: 'bar',
                    barWidth: 20,
                    data: res.data.zcm.map(item => ({
                      value: item.finished,
                      name: item.name,
                      extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.bigname+"</span><br/>占比: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>本二级品类成交金额: <span style='color:red;font-weight:bold;'>"+item.finished+"万元</span><br/>一级品类成交金额: <span style='color:green;font-weight:bold;'>"+item.target+"万元</span>"
                    })),
                    itemStyle: {
                      color: function(params) {
                        // 颜色数组
                        const colorList = zcmcolors;
                        // 根据数据索引返回对应颜色
                        return colorList[params.dataIndex % colorList.length];
                      }
                    },
                    label: {
                      show: true,
                      position: 'right',     
                      formatter: '{c}万元',
                      fontSize: 10,
                      fontWeight:'bold',
                      color: 'aqua'
                    }
                  }
                ]
              };
              chart1.setOption(option1);
              // 其他
              const chart2 = echarts.init(document.getElementById("div20"));
              const option2 = {
                tooltip: { 
                  trigger: 'axis',
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                grid: { left: '3%', right: '10%', bottom: '1%',height: 200,containLabel: true },

                /* 横向：Y 轴类目，X 轴数值 */
                yAxis: { 
                  type: 'category', 
                  data: qtlabels,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                xAxis: { 
                  type: 'value',
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },

                series: [
                  /* 三条不同颜色的条放在同一位置重叠 */
                  {
                    type: 'bar',
                    barWidth: 20,
                    data: res.data.qt.map(item => ({
                      value: item.finished,
                      name: item.name,
                      extraInfo: "品类: <span style='color:blue;font-weight:bold;'>"+item.bigname+"</span><br/>占比: <span style='color:green;font-weight:bold;'>"+item.finishRate+"%</span><br/>本二级品类成交金额: <span style='color:red;font-weight:bold;'>"+item.finished+"万元</span><br/>一级品类成交金额: <span style='color:green;font-weight:bold;'>"+item.target+"万元</span>"
                    })),
                    itemStyle: {
                      color: function(params) {
                        // 颜色数组
                        const colorList = qtcolors;
                        // 根据数据索引返回对应颜色
                        return colorList[params.dataIndex % colorList.length];
                      }
                    },
                    label: {
                      show: true,
                      position: 'right',     
                      formatter: '{c}万元',
                      fontSize: 10,
                      fontWeight:'bold',
                      color: 'aqua'
                    }
                  }
                ]
              };
              chart2.setOption(option2);
              this.chart1 = "0";
              this.chart2 = "div10";
              this.chart3 = "div20";

              this.switper()
            }else{
              this.pageflag = false;
              this.$Message.warning(res.msg);
            }
          });
        }else{
          this.pageflag = false;
          this.$Message.warning(res1.msg);
        }
      });
    },
    //轮询
    switper() {
        if (this.timer) {
            return
        }
        let looper = (a) => {
            this.getData()
        };
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
  },
};
</script>
<style lang='scss' scoped>
/* 修改所有标签的字体颜色 */
::v-deep .el-tabs__item {
  color: white; /* 默认字体颜色 */
}

/* 修改被激活的标签的字体颜色 */
::v-deep .el-tabs__item.is-active {
  color: aqua; /* 激活状态的字体颜色 */
}

/* 修改激活状态的标签的分割线颜色 */
::v-deep .el-tabs__item.is-active {
  border-bottom-color: #13ce66; /* 激活状态的标签底部颜色为绿色 */
}

::v-deep .el-tabs__active-bar {
	background-color:aqua;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;
    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 420px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }
      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }


    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>